<template>
  <view>
    <div class="">
      <div v-for="(item, index) in images" :key="index" @longpress="longpressMe(index)">
        <image style="width: 575rpx; height: 377rpx; margin: 50rpx 80rpx 0 80rpx; #eeeeee;" :mode="scaleToFill" :src="item.uploadImgUrl"
          @error="imageError(index)"></image>
        <image style="width: 750rpx; height: 82rpx; background-color: #eeeeee;" :mode="aspectFit" :src="item.monthUrl"
          @error="imageError(index)"></image>
      </div>

      <div>
        <uni-popup ref="popup" type="dialog">
          <uni-popup-dialog type="info" mode="base" title="请上传图片" :duration="2000" :before-close="true" @close="close"
            @confirm="confirm"></uni-popup-dialog>
        </uni-popup>
      </div>
    </div>
  </view>
</template>

<script>
  import uniPopup from '@/components/uni-popup/uni-popup.vue'
  import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
  import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'

  export default {
    components: {
      uniPopup,
      uniPopupMessage,
      uniPopupDialog
    },

    data() {
      return {
        chooseIndex: 0,
        images: [],
        imagesDefault: [{
            uploadImgUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/5e78fd80-2106-11eb-880a-0db19f4f74bb.png',
            monthUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/5daef6c0-2106-11eb-b997-9918a5dda011.png',
          },
          {
            uploadImgUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/5fdd6f80-2106-11eb-899d-733ae62bed2f.png',
            monthUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/5f29fe00-2106-11eb-b997-9918a5dda011.png',
          },
          {
            uploadImgUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/6132ed60-2106-11eb-899d-733ae62bed2f.png',
            monthUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/60762d10-2106-11eb-899d-733ae62bed2f.png',
          },
          {
            uploadImgUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/62cb40a0-2106-11eb-899d-733ae62bed2f.png',
            monthUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/61d0b400-2106-11eb-899d-733ae62bed2f.png',
          },
          {
            uploadImgUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/640a5050-2106-11eb-9dfb-6da8e309e0d8.png',
            monthUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/6370a860-2106-11eb-9dfb-6da8e309e0d8.png',
          },
          {
            uploadImgUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/655e6ea0-2106-11eb-b680-7980c8a877b8.png',
            monthUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/64befa50-2106-11eb-9dfb-6da8e309e0d8.png',
          },
          {
            uploadImgUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/669e41a0-2106-11eb-b680-7980c8a877b8.png',
            monthUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/65fafcc0-2106-11eb-b680-7980c8a877b8.png',
          },
          {
            uploadImgUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/687328b0-2106-11eb-9dfb-6da8e309e0d8.png',
            monthUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/67455710-2106-11eb-9dfb-6da8e309e0d8.png',
          },
          {
            uploadImgUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/69fde760-2106-11eb-9dfb-6da8e309e0d8.png',
            monthUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/694c71b0-2106-11eb-9dfb-6da8e309e0d8.png',
          },
          {
            uploadImgUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/6b5253d0-2106-11eb-899d-733ae62bed2f.png',
            monthUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/6aaf0ef0-2106-11eb-899d-733ae62bed2f.png',
          },
          {
            uploadImgUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/6cf04c60-2106-11eb-8ff1-d5dcf8779628.png',
            monthUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/6c24bf00-2106-11eb-899d-733ae62bed2f.png',
          },
          {
            uploadImgUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/6e2d3930-2106-11eb-899d-733ae62bed2f.png',
            monthUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-3ke5ptbytcgy32043a/6d939140-2106-11eb-9dfb-6da8e309e0d8.png',
          }
        ]
      };
    },

    async onLoad() {
      const vm = this;
      vm.openid = uni.getStorageSync('openid');
      await vm.initPage(vm.openid);
    },

    methods: {
      // 初始化方法
      async initPage(openid) {
        const vm = this;
        vm.images = [];

        const res = await uniCloud.callFunction({
          name: 'find-images',
          data: {
            openid: vm.openid
          }
        });

        console.log(res.result.data);
        if (res && res.result && res.result.data && res.result.data.length) {
          let images = res.result.data;
          for (let i = 0; i < 12; i++) {
            let flag = false;
            for (let j = 0; j < images.length; j++) {
              if (images[j].image_index === i) {
                vm.images.push({
                  uploadImgUrl: images[j].img_url,
                  monthUrl: vm.imagesDefault[i].monthUrl,
                });
                flag = true;
                break;
              }
            }

            if (!flag) {
              vm.images.push({
                uploadImgUrl: vm.imagesDefault[i].uploadImgUrl,
                monthUrl: vm.imagesDefault[i].monthUrl,
              });
            }
          }
        }
      },

      // 点击启动跳往扫描身份证页面
      imageError(index) {
        console.log('触发了错误');
      },

      // 长按弹出弹框
      longpressMe(index) {
        const vm = this;
        vm.chooseIndex = index;
        console.log(vm.chooseIndex);
        this.$refs.popup.open();
      },

      // 关闭弹框
      close(done) {
        done();
      },

      // 确认弹框
      async confirm(done, val) {
        done();
        await this.upload();
      },

      async upload() {
        const vm = this;

        new Promise((resolve, reject) => {
          uni.chooseImage({
            count: 1,
            success: res => {
              const path = res.tempFilePaths[0];

              uni.getImageInfo({
                src: path,
                success(info) {
                  const options = {
                    filePath: path,
                    cloudPath: Date.now() + '.' + info.type.toLowerCase()
                  }
                  resolve(options);
                },
                fail(err) {
                  reject(new Error(err.errMsg || '未能获取图片类型'));
                }
              })
            },
            fail: () => {
              reject(new Error('Fail_Cancel'));
            }
          })
        }).then((options) => {
          uni.showLoading({
            title: '文件上传中...'
          })
          return uniCloud.uploadFile({
            ...options,
            onUploadProgress(e) {
              console.log(e)
            }
          })
        }).then(async res => {
          uni.hideLoading();
          console.log(res);
          this.fileID = res.fileID;

          console.log({
            openid: vm.openid,
            imageIndex: vm.chooseIndex,
            imgUrl: res.fileID,
          });
          uniCloud.callFunction({
            name: 'save-images',
            data: {
              openid: vm.openid,
              imageIndex: vm.chooseIndex,
              imgUrl: res.fileID,
            },
            success(){
              console.log('刷新列表', vm.openid);
              vm.initPage(vm.openid);
              
              uni.showModal({
                content: '图片上传成功',
                showCancel: false
              })
            },
            fail(){
              uni.showModal({
                content: '图片上传失败',
                showCancel: false
              })
            }
          })
        }).catch((err) => {
          uni.hideLoading();
          console.log(err);
          if (err.message !== 'Fail_Cancel') {
            uni.showModal({
              content: `图片上传失败，错误信息为：${err.message}`,
              showCancel: false
            })
          }
        })
      },

      showImg() {
        if (!this.fileID) {
          uni.showModal({
            content: '请先上传一张图片',
            showCancel: false
          })
          return
        }
        // 腾讯云需要获取临时链接
        uniCloud.getTempFileURL({
          fileList: [this.fileID],
          success: (res) => {
            this.imgUrl = res.fileList[0].tempFileURL
            console.log(res);
          },
          fail: () => {
            uni.showModal({
              content: '获取临时链接失败',
              showCancel: false
            })
          }
        })
        // 阿里云可以直接使用fileID进行展示
        // this.imgUrl = this.fileID
      }
    }
  }
</script>

<style lang="less">

</style>
